<template>
  <div class="video rel" style="margin-top: 1rem;">

    <div class="play" @click="onVideo" v-if="isPlay2">
      <img src="../../assets/images/ico-play.png" alt="" class="iconplay">
      <img :src="videoPic" alt="" class="abs" v-if="isPlay">
    </div>
    <video-player class="video-player vjs-custom-skin" crossOrign="anonymous" ref="videoPlayer" :playsinline="true"
      :options="playerOptions" @play="onPlayerPlay($event)" v-if="!isPlay" @pause="onPlayerPause($event)">
    </video-player>
  </div>
</template>
<script>
import Vue from 'vue'
import VideoPlayer from 'vue-video-player'
//引入样式
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
//使用组件
Vue.use(VideoPlayer)
export default {
  props: ['playerOptions', 'videoPic'],
  data() {
    return {
      isPlay: true,
      isPlay2: true
    };
  },
  mounted() {

  },

  methods: {
    onPlayerPlay(player) {
      console.log("player play!", player);
      this.isPlay2 = false;
    },
    // 暂停回调
    onPlayerPause(player) {
      this.isPlay2 = true;
      console.log("player pause!", player);
    },

    onVideo() {
      if (!this.isPlay2) {
        this.isPlay2 = true;
        this.$refs.videoPlayer.player.pause();
      } else {
        this.isPlay = false
        this.isPlay2 = false;
        setTimeout(() => {
          this.$refs.videoPlayer.player.play();
        }, 200);
      }



    },
    onPause() {
      this.isPlay = false
      this.isPlay2 = true;
      console.log(123456)
      // this.$refs.myVideo.play();
    },

  },
};
</script>



<style lang="less" scoped>
/deep/ .content-container {
  padding-top: 0 !important;
}

/deep/ .vjs-custom-skin>.video-js {
  .vjs-big-play-button {

    width: 0;

    height: 0;

    background-color: rgba(0, 0, 0, 0.45);

    font-size: 0;

    border-radius: 0;
  }


}

.video-player {
  height: 6rem;
}

.video {
  height: 6rem;

  >img {
    width: 100%;
    height: 100%;
    z-index: 2;
    object-fit: cover;
  }

  video {
    width: 100%;
    background: #000;
  }

  .play {
    position: relative;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;

    .iconplay {
      position: absolute;
      height: 1rem;
      top: 50%;
      left: 50%;
      z-index: 5;
      transform: translate(-50%, -50%);
    }

    .abs {
      width: 100%;
      height: 6rem;
      object-fit: cover;
    }

  }
}
</style>